<template>
  <div class="myLike-container">
    <div
      class="myLike-content"
      style="width: 100%; height: 680px; overflow-y: auto"
    >
      <div
        class="item"
        style="padding: 6px 20px"
        v-for="(item, index) in myLikeInfo"
        :key="index"
      >
        <el-card shadow="hover" class="my-like-card" style="padding: 12px">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="article-tags" style="text-align: left">
                <el-tag
                  v-for="(tagName, index) in item.tagsName"
                  :key="index"
                  size="small"
                  style="margin-right: 5px"
                >
                  {{ tagName }}
                </el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <!-- 链接展示，点击进入阅读文章的模式 -->
              <div class="article-title" style="text-align: left">
                <el-link
                  target="_blank"
                  @click="goBlogDetail(item.knowledgeId)"
                  >{{ item.title }}</el-link
                >
              </div>
            </el-col>
            <el-col :span="4">
              <div class="article-author" style="overflow: hidden">
                {{ item.author }}
              </div></el-col
            >
            <el-col :span="2">
              <div class="like-icon">
                <img
                  v-if="item.state === 1"
                  :src="likeDefaultImg"
                  @click="cancelLiked(item)"
                  class="is-like-img"
                  style="width: 20px; height: 20px; cursor: pointer"
                />
                <img
                  v-else
                  class="is-like-img"
                  :src="likeActiveImg"
                  @click="cancelLiked(item)"
                  style="width: 20px; height: 20px; cursor: pointer"
                /></div
            ></el-col>
          </el-row>
        </el-card>
      </div>
    </div>
    <div class="my-like-pagination">
      <el-row type="flex" justify="center" style="margin-top: 10px">
        <el-col :span="24">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-size="pageSize"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :prev-text="`上一页`"
            :next-text="`下一页`"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { getMyLike, addOrRemoveLike } from "@/apis/apis";

@Component({
  name: "myLike",
})
export default class myLike extends Vue {
  // 点赞栏的图标
  likeDefaultImg = require("@/assets/images/userMain/点赞.png");
  likeActiveImg = require("@/assets/images/userMain/like.png");
  myLikeInfo: [
    {
      knowledgeId: number;
      title?: string;
      tagsName?: string[];
      author?: string;
      state?: number;
    }
  ] = [
    {
      knowledgeId: 0,
      title: "ChatGPT横空出世",
      tagsName: ["人工智能", "AIGC", "OpenAI"],
      author: "杰哥",
      state: 0,
    },
  ] as any;
  total: number = 0;
  pageSize: number = 10;
  pageIndex: number = 1;
  // 页面加载时请求第一页的数据
  mounted() {
    this.getUserAllLike(1, 10);
  }
  //  1.获取所有的点赞信息
  getUserAllLike(pageNum: number = 1, pageSize: number = 10) {
    getMyLike(pageNum, pageSize)
      .then((res) => {
        if (res.data.code === "200") {
          this.$message.success("获取我的点赞信息成功");
          this.total = res.data.data.total;
          let resData = res.data.data.records;
          // 每次请求时先清空原来的数据
          this.myLikeInfo = [] as any;
          let len = resData.length;
          // tags的name在数据库中没加入的时候是可以为空的
          for (let i = 0; i < len; i++) {
            let tagsName = [];
            if (resData[i].tags) {
              tagsName = resData[i].tags.map((tag: any) => {
                return tag.tagName;
              });
            }
            this.myLikeInfo.push({
              knowledgeId: resData[i].knowledgeId,
              title: resData[i].title,
              tagsName: tagsName,
              author: resData[i].nickName,
              state: 0,
            });
          }
        } else {
          this.$message.error("获取我的点赞信息失败，请重试！");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
  // 2.查看文章的详细信息
  goBlogDetail(knowledgeId: number) {
    let id = knowledgeId.toString();
    const route = this.$router.resolve({
      name: "blogDetail",
      query: {
        knowledgeId: id,
      },
    });
    window.open(route.href, "_blank");
  }
  // 3.取消点赞和继续点赞的接口
  cancelLiked(item: any) {
    item.state = item.state === 0 ? 1 : 0;
    addOrRemoveLike(item.knowledgeId)
      .then((res) => {
        if (res.data.code === "200") {
          this.$message.success("取消点赞成功");
        } else {
          this.$message.error("取消点赞失败");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
  // 4.页面展示内容多少变化时重新请求
  handleSizeChange(val: number): void {
    this.pageSize = val;
    this.getUserAllLike(this.pageIndex, this.pageSize);
  }
  // 5.处理当前页面的切换
  handleCurrentChange(val: number): void {
    this.pageIndex = val;
    this.getUserAllLike(this.pageIndex, this.pageSize);
  }
}
</script>

<style>
</style>